{% extends 'base.html' %}
{% from 'bootstrap/table.html' import render_table %}

{% block content %}
    <div class="container" style="max-width: 1100px; margin: 0 auto;">

        <!-- Tittle -->
        <h2 class="page-header">脚本修复结果</h2>

        <!-- Main component for a primary marketing message or call to action -->

        <div class="row" style="display:flex; justify-content:space-around;">

        <!-- 左边栏 -->
        <div class="col-lg-3" style="margin: 0 auto;
        max-width: 400px;
        height: 400px;">
            <!-- 结果下载 -->
            <!-- <form action="http://127.0.0.1:5001/uploader_single" method="POST"> -->
                <div style="text-align:center; margin-bottom: 30px;">
                    <a href={{url_for('download_file')}} methods="GET">
                        <button type="button" style= " height: 60px;" class="btn btn-success btn-lg btn-block">下载新脚本</button>
                    </a>
                        
                </div>
            <!-- </form> -->
            

            <!-- 往期数据查询 -->
            <div class="container" style="background-color: lightgrey; margin-bottom: 30px; border-radius: 10px;">
                <h2>历史修复记录</h2>
                <div class="input-group" style="margin-top: 0 auto; position: relative;">
                    <input type="text" class="form-control" placeholder="Search..." />
                        <span class="input-group-btn">
                            <button class="btn btn-info btn-search">查找</button>
                        </span>
                </div>
                <p class="help-block">输入想要查找的历史项目的名称</p>
            </div>
            
            <!-- 往期数据查询 -->
            <ul class="list-group">
                <li li class="list-group-item">上传界面</li>
                <li class="list-group-item">运行配置界面</li>
                <li class="list-group-item">等待界面</li>
                <li class="list-group-item">结果界面<span class="glyphicon glyphicon-ok" style="color: green; left: 100px;"></span></li>
            </ul>
        </div>

        <!-- 右边主界面 -->
        <div class="col-lg-9 jumbotron" style="
            margin: 0 auto;
            background-color:lightgray">
            <h3>修复结果</h3>
            <hr/>
            {{ render_table(messages, titles, table_classes='table-striped', header_classes='dark') }}
{#               {{ render_table(messages) }}#}

        </div>

        </div>
    </div>

{% endblock content %}